<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<title>私人活動-邀請朋友</title>

<link rel="stylesheet" href="../css/sunny/fontsize1.1/jquery-ui-1.10.4.custom.css">

<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/jquery-ui-1.10.4.custom.js"></script>
<script src="../js/jquery.elastic.source.js"></script>

<style>
input.text,textarea {
	margin-bottom: 12px;
	width: 50%;
	padding: .4em;
	font-size: 16px;
	font-family: '微軟正黑體';
}

</style>

<script>
	$(function() {
		parent.$('#manageactivity').dialog("option", "position", "top");
		$("p > span").buttonset();
		$(".buttonClass").button();
		$(this).height(500);
		$( ".elastic" ).elastic();
		var availableTags = [
		      "ActionScript",
		      "AppleScript",
		      "Asp",
		      "BASIC",
		      "C",
		      "C++",
		      "Clojure",
		      "COBOL",
		      "ColdFusion",
		      "Erlang",
		      "Fortran",
		      "Groovy",
		      "Haskell",
		      "Java",
		      "JavaScript",
		      "Lisp",
		      "Perl",
		      "PHP",
		      "Python",
		      "Ruby",
		      "Scala",
		      "Scheme"
		    ];
		 function split( val ) {
		      return val.split( /,\s*/ );
		    }
		    function extractLast( term ) {
		      return split( term ).pop();
		    }
		$( "#tags" )
	      // don't navigate away from the field on tab when selecting an item
	      .bind( "keydown", function( event ) {
	        if ( event.keyCode === $.ui.keyCode.TAB &&
	            $( this ).data( "ui-autocomplete" ).menu.active ) {
	          event.preventDefault();
	        }
	      })
	      .autocomplete({
	        minLength: 0,
	        source: function( request, response ) {
	          // delegate back to autocomplete, but extract the last term
	          response( $.ui.autocomplete.filter(
	            availableTags, extractLast( request.term ) ) );
	        },
	        focus: function() {
	          // prevent value inserted on focus
	          return false;
	        },
	        select: function( event, ui ) {
	          var terms = split( this.value );
	          // remove the current input
	          terms.pop();
	          // add the selected item
	          terms.push( ui.item.value );
	          // add placeholder to get the comma-and-space at the end
	          terms.push( "" );
	          this.value = terms.join( ", " );
	          return false;
	        }
	      });
	});
</script>

</head>

<body style="height: 500px;">

<h3 style="text-shadow: 2px 2px 2px white; color: black; font-family: '微軟正黑體';">邀請朋友</h3>
<form action="#" method="get" style="line-height: 16px; font-size: 16px; font-family: '微軟正黑體';">
	<p>
		<label for="content">邀請朋友名單：</label>
		<textarea id="tags" cols="80" rows="2" placeholder="請輸入好友名稱"
				class="elastic text ui-widget-content ui-corner-all"
				style="resize: none; max-height:82px; "></textarea>
	</p>
	
	<input type="submit" value="送出 " class="buttonClass"> <input type="reset" value="重填"
			class="buttonClass"><br>
</form>

</body>

</html>